From 7327a69b55a20b99b14ee0803d6cf5f8b88c45ef Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 13 Sep 2023 00:45:53 +0700 Subject: Update v4 - Merge pre-push to main (#71) * Create build-test.yml * initial v4 commit * update: github workflow * update: push on branch * Update .github/ISSUE_TEMPLATE/bug_report.md * configuring next.config.js file --- pages/en/search/[...param].js | 433 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 433 insertions(+) create mode 100644 pages/en/search/[...param].js (limited to 'pages/en/search/[...param].js') diff --git a/pages/en/search/[...param].js b/pages/en/search/[...param].js new file mode 100644 index 0000000..2ec7681 --- /dev/null +++ b/pages/en/search/[...param].js @@ -0,0 +1,433 @@ +import { useEffect, useRef, useState } from "react"; +import { AnimatePresence, motion as m } from "framer-motion"; +import Skeleton from "react-loading-skeleton"; +import { useRouter } from "next/router"; +import Link from "next/link"; +import Navbar from "../../../components/navbar"; +import Head from "next/head"; +import Footer from "../../../components/footer"; + +import Image from "next/image"; +import { aniAdvanceSearch } from "../../../lib/anilist/aniAdvanceSearch"; +import MultiSelector from "../../../components/search/dropdown/multiSelector"; +import SingleSelector from "../../../components/search/dropdown/singleSelector"; +import { + animeFormatOptions, + formatOptions, + genreOptions, + mangaFormatOptions, + mediaType, + seasonOptions, + tagsOption, + yearOptions, +} from "../../../components/search/selection"; +import InputSelect from "../../../components/search/dropdown/inputSelect"; +import { Cog6ToothIcon, TrashIcon } from "@heroicons/react/20/solid"; +import useDebounce from "../../../lib/hooks/useDebounce"; +// import { NewNavbar } from "../../../components/anime/mobile/topSection"; +// import { useSession } from "next-auth/react"; + +export async function getServerSideProps(context) { + const { param } = context.query; + + const { search, format, genres, season, year } = context.query; + + let getFormat; + let getSeason; + let getYear; + let getGenres = []; + + if (genres) { + const gr = genreOptions.find( + (i) => i.value.toLowerCase() === genres.toLowerCase() + ); + getGenres.push(gr); + } + + if (season) { + getSeason = seasonOptions.find( + (i) => i.value.toLowerCase() === season.toLowerCase() + ); + if (!year) { + const now = new Date().getFullYear(); + getYear = yearOptions.find((i) => i.value === now.toString()); + } else { + getYear = yearOptions.find((i) => i.value === year); + } + } + + if (format) { + getFormat = formatOptions.find( + (i) => i.value.toLowerCase() === format.toLowerCase() + ); + } + + if (!param && param.length !== 1) { + return { + notFound: true, + }; + } + + const typeIndex = param[0] === "anime" ? 0 : 1; + + return { + props: { + index: typeIndex, + query: search || null, + formats: getFormat || null, + seasons: getSeason || null, + years: getYear || null, + genres: getGenres || null, + }, + }; +} + +export default function Card({ + index, + query, + genres, + formats, + seasons, + years, +}) { + const inputRef = useRef(null); + const router = useRouter(); + // const { data: session } = useSession(); + + const [data, setData] = useState(); + const [loading, setLoading] = useState(true); + + const [search, setQuery] = useState(query); + const debounceSearch = useDebounce(search, 500); + + const [type, setSelectedType] = useState(mediaType[index]); + const [year, setYear] = useState(years); + const [season, setSeason] = useState(seasons); + const [sort, setSelectedSort] = useState(); + const [genre, setGenre] = useState(genres); + const [format, setFormat] = useState(formats); + + const [isVisible, setIsVisible] = useState(false); + + const [page, setPage] = useState(1); + const [nextPage, setNextPage] = useState(true); + + async function advance() { + setLoading(true); + const data = await aniAdvanceSearch({ + search: debounceSearch, + type: type?.value, + genres: genre, + page: page, + sort: sort?.value, + format: format?.value, + season: season?.value, + seasonYear: year?.value, + }); + if (data?.media?.length === 0) { + setNextPage(false); + } else if (data !== null && page > 1) { + setData((prevData) => { + return [...(prevData ?? []), ...data?.media]; + }); + setNextPage(data?.pageInfo.hasNextPage); + } else { + setData(data?.media); + } + setNextPage(data?.pageInfo.hasNextPage); + setLoading(false); + } + + useEffect(() => { + setData(null); + setPage(1); + setNextPage(true); + advance(); + }, [ + debounceSearch, + type?.value, + sort?.value, + genre, + format?.value, + season?.value, + year?.value, + ]); + + useEffect(() => { + advance(); + }, [page]); + + useEffect(() => { + function handleScroll() { + if (page > 10 || !nextPage) { + window.removeEventListener("scroll", handleScroll); + return; + } + + if ( + window.innerHeight + window.pageYOffset >= + document.body.offsetHeight - 3 + ) { + setPage((prevPage) => prevPage + 1); + } + } + + window.addEventListener("scroll", handleScroll); + + return () => window.removeEventListener("scroll", handleScroll); + }, [page, nextPage]); + + const handleKeyDown = async (event) => { + if (event.key === "Enter") { + event.preventDefault(); + const inputValue = event.target.value; + if (inputValue === "") { + setQuery(null); + } else { + setQuery(inputValue); + } + } + }; + + function trash() { + setQuery(); + setGenre(); + setFormat(); + setSelectedSort(); + setSeason(); + setYear(); + router.push(`/en/search/${mediaType[index]?.value?.toLowerCase()}`); + } + + function handleVisible() { + setIsVisible(!isVisible); + } + + return ( + <> + + Moopa - search + + + + + + {/* */} +
+
+
+
+ + {/* GENRES */} + + {/* SORT */} + {/* */} + {/* FORMAT */} + + {/* SEASON */} + + {/* YEAR */} + +
+
+ +
+ +
+
+ +
+
+ +
+
+
+ {isVisible && ( +
+
+ {/* GENRES */} + + {/* SORT */} + {/* */} + {/* FORMAT */} + + {/* SEASON */} + + {/* YEAR */} + +
+
+ )} + {/*
*/} +
+ +
+ {loading + ? "" + : !data?.length && ( +
+ Oops!

Nothing's Found... +
+ )} + {data && + data?.map((anime, index) => { + return ( + + + {anime.title.userPreferred} + + +

+ {anime.status === "RELEASING" ? ( + + ) : anime.status === "NOT_YET_RELEASED" ? ( + + ) : null} + {anime.title.userPreferred} +

+ +

+ {anime.format ||

-

} ·{" "} + {anime.status ||

-

} ·{" "} + {anime.episodes + ? `${anime.episodes || "N/A"} Episodes` + : `${anime.chapters || "N/A"} Chapters`} +

+ + ); + })} + + {loading && ( + <> + {[1, 2, 4, 5, 6, 7, 8].map((item) => ( +
+ + +
+ ))} + + )} +
+ {!loading && page > 10 && nextPage && ( + + )} + +
+ {/*
*/} +
+
+